<template>
  <div>
    <a-card title="身份列表展示" :body-style="{ paddingBottom: '8px' }">
      <template #extra>
        <a-tooltip title="前往帮助中心">
          <a
            class="system__icon"
            href="https://www.yuque.com/u32997899/ax/toi4xopf3bc5dgph?singleDoc# 《系统身份》"
          >
            <QuestionCircleTwoTone />
          </a>
        </a-tooltip>
      </template>
      <a-flex :gap="4" :align="'center'" :justify="'space-between'" class="mb-8">
        <a-flex :gap="4">
          <a-button type="primary" @click="create">
            <PlusOutlined />
          </a-button>

          <a-tooltip title="重新加载">
            <a-button type="link" @click="roleList">
              <ReloadOutlined />
            </a-button>
          </a-tooltip>

          <a-input-search
            placeholder="请输入角色名"
            v-model:value="roleTable.query.roleName"
            @search="roleList"
            allow-clear
          ></a-input-search>
        </a-flex>
        <a-flex>
          <FieldVue
            :raw="roleRawColumns"
            :columns="roleColumns"
            :module-name="roleTable.moduleName"
          />
          <div v-perm="'system:role:remove'">
            <a-popconfirm
              title="确定要删除吗"
              :disabled="roleTable.keys.length === 0"
              placement="bottomRight"
              @confirm="delRoles"
            >
              <a-tooltip title="批量删除">
                <a-button danger type="link" :disabled="roleTable.keys.length === 0">
                  <DeleteOutlined />
                </a-button>
              </a-tooltip>
            </a-popconfirm>
          </div>
          <a-tooltip
            title="卡片模式"
            @click="roleTable.viewMode = 'card'"
            v-if="roleTable.viewMode === 'table'"
          >
            <a-button type="link">
              <OrderedListOutlined />
            </a-button>
          </a-tooltip>

          <a-tooltip title="表格模式" @click="roleTable.viewMode = 'table'" v-else>
            <a-button type="link">
              <AppstoreAddOutlined />
            </a-button>
          </a-tooltip>
        </a-flex>
      </a-flex>

      <a-flex :gap="2" :align="'center'" class="text-nowrap">
        <span class="system__subtitle">编辑/权限:</span>
        <a-tooltip title="编辑基础信息">
          <a-button type="link" @click="selectRole()" :disabled="roleTable.keys.length !== 1">
            <template #icon>
              <EditOutlined />
            </template>
            基础信息
          </a-button>
        </a-tooltip>

        <a-button type="text" :disabled="roleTable.keys.length !== 1" @click="allocatingResource">
          分配资源
          <template #icon>
            <ClusterOutlined />
          </template>
        </a-button>

        <a-button type="text" :disabled="roleTable.keys.length !== 1" @click="allocateUsers">
          分配人员
          <template #icon>
            <UserAddOutlined />
          </template>
        </a-button>

        <a-button type="text" :disabled="roleTable.keys.length !== 1" @click="unassignUsers">
          取消分配
          <template #icon>
            <UserDeleteOutlined />
          </template>
        </a-button>
      </a-flex>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { roleTreeSelect } from '@/api/modules/system/role/role';
import FieldVue from '@/views/components/table/Field.vue';
import {
  ClusterOutlined,
  DeleteOutlined,
  ReloadOutlined,
  UserDeleteOutlined,
} from '@ant-design/icons-vue';
import { roleColumns, roleRawColumns } from '../../data/column';
import { allocatingResource, delRoles, roleList, selectRole } from '../../data/curd';
import { roleResetForm } from '../../data/form';
import { RoleViewNum, roleFormMode, roleMenus, roleTable } from '../../data/table';
import { allocateUsers, unassignUsers } from '../assign/data';

const create = async () => {
  const { data } = await roleTreeSelect();
  if (data.data) {
    roleMenus.value = data.data;
  }
  roleFormMode.value = RoleViewNum.ROLE_FORM;
  roleResetForm();
};
onMounted(async () => {
  await roleList();
});
</script>

<style lang="scss" scoped></style>
